<template>
  <h3 style="margin-bottom: 20px">员工离职</h3>
  <span class="my-label">性别:</span>
<!--  <el-select v-model="sexSelected" class="my-input" placeholder="性别">-->
<!--    <el-option label="男" value="男"></el-option>-->
<!--    <el-option label="女" value="女"></el-option>-->
<!--    <el-option label="其它" value="其它"></el-option>-->
<!--  </el-select>-->
  <span class="my-label">职位:</span>
  <el-select v-model="jobSelected" class="my-input" placeholder="职位">
    <el-option label="店长" value="店长"></el-option>
    <el-option label="经理" value="经理"></el-option>
    <el-option label="服务员" value="服务员"></el-option>
    <el-option label="厨师" value="厨师"></el-option>
    <el-option label="保洁" value="保洁"></el-option>
    <el-option label="其他" value="其他"></el-option>
  </el-select>

<!--  <span class="my-label">是否离职:</span>-->
<!--  <el-select v-model="exited" class="my-input" placeholder="是否离职">-->
<!--    <el-option label="不限" :value="null"></el-option>-->
<!--    <el-option label="是" :value="true"></el-option>-->
<!--    <el-option label="否" :value="false"></el-option>-->
<!--  </el-select>-->
  <br/>
  <el-button type="primary" @click="handleSubmit" style="margin-top: 10px">查询</el-button>
  <el-table :data="employeeList"
            border
            style="width: 70vw;margin-top: 20px"
            @row-click="deleteEmployee"
  >
    <el-table-column type="index" width="50"/>
    <el-table-column prop="id" label="员工ID"/>
    <el-table-column prop="name" label="姓名"/>
    <el-table-column prop="sex" label="性别"/>
    <el-table-column prop="job" label="职位"/>
    <el-table-column prop="baseSalary" label="基本工资"/>
    <el-table-column prop="entryTime" label="入职时间"/>
    <el-table-column prop="exited" label="是否离职"/>
    <el-table-column prop="exitTime" label="离职时间"/>
  </el-table>

  <div style="margin-top: 10px">
    <el-pagination background layout="prev, pager, next"
                   v-model="currentPage"
                   :page-size="pageSize"
                   :page-count="total"
                   @update:current-page="handleCurrentPageChange"
    />
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {listEmployeeConditionApi} from "../../api";
import {Fetch} from "../../api/request";
import say from "../../util/say";
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
let employeeList = ref([])

let sexSelected = ref(null)
let jobSelected = ref(null)
let exited = ref('不限')

onMounted(async () => {
  const {data} = await (await listEmployeeConditionApi(currentPage.value, pageSize.value,null,null,false)).json()
  employeeList.value = data.content
  total.value = data.totalPages
})

function handleCurrentPageChange(page) {
  currentPage.value = page
}
async function handleSubmit() {
  let sex = (sexSelected.value === '其它') ? null : sexSelected.value
  let job = (jobSelected.value === '其它') ? null : jobSelected.value
  let isExit = (exited.value === '不限') ? null : exited.value === '是'
  const {data} = await (await listEmployeeConditionApi(currentPage.value, pageSize.value, sex, job, isExit)).json()
  employeeList.value = data.content
  total.value = data.totalPages
}
function deleteEmployee(employee) {
  if(employee.exited) {
    say.sayError("员工已经离职，无需操作")
    return
  }
  let emp = {}
  Object.assign(emp,employee)
  emp.exitTime = new Date()
  emp.exited = true
  Fetch.post('/employee/save', emp).then(async response => {
    if (response.ok) {
      say.saySuccess('保存成功')
      const {data} = await (await listEmployeeConditionApi(currentPage.value, pageSize.value,null,null,false)).json()
      employeeList.value = data.content
      total.value = data.totalPages
    } else {
      say.sayError('保存失败')
    }
  }).catch(_ => {
    say.sayError('保存失败')
  });
}
</script>

<style scoped>
.my-label {
  vertical-align: center;
  margin-right: 10px;
  margin-top: 5px;
}

.my-input {
  margin-right: 30px;
}
</style>